<template>
  <view>
    <view class="title">
      <view class="">
        <image src="../../static/img/person/推荐.png" mode=""></image>
        <text>点赞</text>
      </view>
      <view class="">
        <image src="../../static/img/person/即时聊天.png" mode=""></image>
        <text>评论</text>
      </view>
      <view class="">
        <image src="../../static/img/person/收藏.png" mode=""></image>
        <text>收藏</text>
      </view>
    </view>
    <view class="messages">
      <view class="message-item" v-for="(item, index) in messages" :key="index">
        <view class="avatar">
          <image :src="item.avatar" mode="aspectFill"></image>
        </view>
        <view class="content">
          <text class="name">{{ item.name }}</text>
          <text class="message">{{ item.message }}</text>
          <text class="time">{{ item.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        {
          avatar: '../../static/img/list/系统图标.png',
          name: '系统消息',
          message: '小红书客服诚邀您参与问卷小调研！',
          time: '10:00'
        },
        {
          avatar: '../../static/img/list/系统图标-27.png',
          name: '活动消息',
          message: '2024年跨年夜演唱会……',
          time: '09:30'
        },
        {
          avatar: '../../static/img/list/系统图标／通知.png',
          name: '客服聊天',
          message: '你关注的博主更新了新帖子？',
          time: '09:30'
        },
        {
          avatar: '../../static/img/list/3.jpg',
          name: '鸡蛋饼好吃',
          message: '周末有空吗？',
          time: '09:30'
        },
        {
          avatar: '../../static/img/list/1.jpg',
          name: '困了就睡觉',
          message: '不好意思',
          time: '09:30'
        },
        {
          avatar: '../../static/img/list/2.jpg',
          name: '时肆',
          message: '一起吃个饭？',
          time: '09:30'
        },
        {
          avatar: '../../static/img/list/4.jpg',
          name: '乐同学',
          message: '【图片】',
          time: '09:30'
        },
        {
          avatar: '../../static/img/list/5.jpg',
          name: '莎莎',
          message: '【语音】',
          time: '09:30'
        },
        // 更多消息...
      ]
    }
  },
  methods: {

  }
}
</script>

<style>
.title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f4f9ff;
  padding: 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.title view {
  display: flex;
  align-items: center;
  margin: 0 10rpx;
}

.title image {
  width: 100rpx;
  height: 100rpx;
}

.title text {
  font-size: 32rpx;
  color: #333;
  margin-left: 10rpx;
}

.messages {
  flex: 1;
  background-color: #fff;
  padding: 10rpx;
  width: 90%;
  margin: 0 auto;
}

.message-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 60rpx; /* 缩小头像尺寸 */
  height: 60rpx; /* 缩小头像尺寸 */
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10rpx; /* 缩小头像右边距 */
}

.avatar image {
  width: 100%;
  height: 100%;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 30rpx; /* 缩小字体大小 */
  color: #333;
  margin-bottom: 5rpx; /* 缩小底部边距 */
}

.message {
  font-size: 24rpx; /* 缩小字体大小 */
  color: #666;
  margin-bottom: 5rpx; /* 缩小底部边距 */
}

.time {
  display: flex;
  font-size: 24rpx; /* 缩小字体大小 */
  color: #999;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
}

.bottom-bar {
  display: flex;
  justify-content: center;
  padding: 20rpx;
  background-color: #fff;
}

.compose image {
  width: 100rpx;
  height: 100rpx;
}
</style>